<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>${appname}</title>
<%@ include file="/WEB-INF/view/common/css_js_base.jsp"%>
<script>
$(function(){
});
</script>
</head>
<body>
<!-- Begin page content -->
<div class="container">
	<div class="panel panel-primary">
	  <div class="panel-heading">
	    <h3 class="panel-title">基础表单</h3>
	  </div>
	  <div class="panel-body">
			<form role="form">
			  <div class="form-group">
			    <label for="exampleInputEmail1">Email address</label>
			    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
			  </div>
			  <div class="form-group">
			    <label for="exampleInputPassword1">Password</label>
			    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
			  </div>
			  <div class="form-group">
			    <label for="exampleInputFile">File input</label>
			    <input type="file" id="exampleInputFile">
			    <p class="help-block">Example block-level help text here.</p>
			  </div>
			  <div class="checkbox">
			    <label>
			      <input type="checkbox"> Check me out
			    </label>
			  </div>
			  <button type="submit" class="btn btn-default">Submit</button>
			</form>
	  </div>
	</div>
	
	
	<div class="panel panel-primary">
	  <div class="panel-heading">
	    <h3 class="panel-title">in-line form</h3>
	  </div>
	  <div class="panel-body">
			<form class="form-inline" role="form">
			  <div class="form-group">
			    <label class="sr-only" for="exampleInputEmail2">Email address</label>
			    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
			  </div>
			  <div class="form-group">
			    <label class="sr-only" for="exampleInputPassword2">Password</label>
			    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
			  </div>
			  <div class="checkbox">
			    <label>
			      <input type="checkbox"> Remember me
			    </label>
			  </div>
			  <button type="submit" class="btn btn-default">Sign in</button>
			</form>
	  </div>
	</div>
	
	
	
	<div class="panel panel-primary">
	  <div class="panel-heading">
	    <h3 class="panel-title">直接通过 col-sm-X来做表单宽度控制</h3>
	  </div>
	  <div class="panel-body">
		<form class="form-horizontal" role="form">
		  <div class="form-group">
		    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
		    <div class="col-sm-10">
		      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
		    <div class="col-sm-10">
		      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
		    </div>
		  </div>
		  <div class="form-group">
		    <div class="col-sm-offset-2 col-sm-10">
		      <div class="checkbox">
		        <label>
		          <input type="checkbox"> Remember me
		        </label>
		      </div>
		    </div>
		  </div>
		  <div class="form-group">
		    <div class="col-sm-offset-2 col-sm-10">
		      <button type="submit" class="btn btn-default">Sign in</button>
		    </div>
		  </div>
		</form>
	  </div>
	</div>
	
	
	
	<div class="panel panel-primary">
	  <div class="panel-heading">
	    <h3 class="panel-title">form-control-static 当你的form表单一部分内容直接显示时，在p标签中加入form-control-static 如下面email的实例一样</h3>
	  </div>
	  <div class="panel-body">
		<form class="form-horizontal" role="form">
		  <div class="form-group">
		    <label class="col-sm-2 control-label">Email</label>
		    <div class="col-sm-10">
		      <p class="form-control-static">email@example.com</p>
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
		    <div class="col-sm-10">
		      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
		    </div>
		  </div>
		</form>
	  </div>
	</div>
	
	
	
	<div class="panel panel-primary">
	  <div class="panel-heading">
	    <h3 class="panel-title">不让操作的form表单</h3>
	  </div>
	  <div class="panel-body">
		<form role="form">
		  <fieldset disabled>
		    <div class="form-group">
		      <label for="disabledTextInput">Disabled input</label>
		      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
		    </div>
		    <div class="form-group">
		      <label for="disabledSelect">Disabled select menu</label>
		      <select id="disabledSelect" class="form-control">
		        <option>Disabled select</option>
		      </select>
		    </div>
		    <div class="checkbox">
		      <label>
		        <input type="checkbox"> Can't check this
		      </label>
		    </div>
		    <button type="submit" class="btn btn-primary">Submit</button>
		  </fieldset>
		</form>
	  </div>
	</div>
	
	
	
	<div class="panel panel-primary">
	  <div class="panel-heading">
	    <h3 class="panel-title">表单状态</h3>
	  </div>
	  <div class="panel-body">
		<form role="form">
			<div class="form-group has-success">
			  <label class="control-label" for="inputSuccess1">Input with success</label>
			  <input type="text" class="form-control" id="inputSuccess1">
			</div>
			<div class="form-group has-warning">
			  <label class="control-label" for="inputWarning1">Input with warning</label>
			  <input type="text" class="form-control" id="inputWarning1">
			</div>
			<div class="form-group has-error">
			  <label class="control-label" for="inputError1">Input with error</label>
			  <input type="text" class="form-control" id="inputError1">
			</div>
		</form>
	  </div>
	</div>
	
	
	<div class="panel panel-primary">
	  <div class="panel-heading">
	    <h3 class="panel-title">表单带图标</h3>
	  </div>
	  <div class="panel-body">
		<form role="form">
			<div class="form-group has-success has-feedback">
			  <label class="control-label" for="inputSuccess2">Input with success</label>
			  <input type="text" class="form-control" id="inputSuccess2">
			  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
			</div>
			<div class="form-group has-warning has-feedback">
			  <label class="control-label" for="inputWarning2">Input with warning</label>
			  <input type="text" class="form-control" id="inputWarning2">
			  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
			</div>
			<div class="form-group has-error has-feedback">
			  <label class="control-label" for="inputError2">Input with error</label>
			  <input type="text" class="form-control" id="inputError2">
			  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
			</div>
		</form>
	  </div>
	</div>
	
	
	
	<div class="panel panel-primary">
	  <div class="panel-heading">
	    <h3 class="panel-title">表单大小</h3>
	  </div>
	  <div class="panel-body">
		<form role="form">
			<input class="form-control input-lg" type="text" placeholder=".input-lg">
			<input class="form-control" type="text" placeholder="Default input">
			<input class="form-control input-sm" type="text" placeholder=".input-sm">
			
			<select class="form-control input-lg">...</select>
			<select class="form-control">...</select>
			<select class="form-control input-sm">...</select>
		</form>
	  </div>
	</div>
	
	
	<div class="panel panel-primary">
	  <div class="panel-heading">
	    <h3 class="panel-title">带图标的Form</h3>
	  </div>
	  <div class="panel-body">
		<form role="form">
			<div class="input-group">
			  <span class="input-group-addon">@</span>
			  <input type="text" class="form-control" placeholder="Username">
			</div>
			
			<div class="input-group">
			  <input type="text" class="form-control">
			  <span class="input-group-addon">.00</span>
			</div>
			
			<div class="input-group">
			  <span class="input-group-addon">$</span>
			  <input type="text" class="form-control">
			  <span class="input-group-addon">.00</span>
			</div>
		</form>
	  </div>
	</div>
	
	
	<div class="panel panel-primary">
	  <div class="panel-heading">
	    <h3 class="panel-title">append Form size</h3>
	  </div>
	  <div class="panel-body">
		<form role="form">
			<div class="input-group input-group-lg">
			  <span class="input-group-addon">@</span>
			  <input type="text" class="form-control" placeholder="Username">
			</div>
			
			<div class="input-group">
			  <span class="input-group-addon">@</span>
			  <input type="text" class="form-control" placeholder="Username">
			</div>
			
			<div class="input-group input-group-sm">
			  <span class="input-group-addon">@</span>
			  <input type="text" class="form-control" placeholder="Username">
			</div>
		</form>
	  </div>
	</div>
	
	
	<div class="panel panel-primary">
	  <div class="panel-heading">
	    <h3 class="panel-title">append Form radio and checkbox</h3>
	  </div>
	  <div class="panel-body">
			<div class="row">
			  <div class="col-lg-6">
			    <div class="input-group">
			      <span class="input-group-addon">
			        <input type="checkbox">
			      </span>
			      <input type="text" class="form-control">
			    </div><!-- /input-group -->
			  </div><!-- /.col-lg-6 -->
			  <div class="col-lg-6">
			    <div class="input-group">
			      <span class="input-group-addon">
			        <input type="radio">
			      </span>
			      <input type="text" class="form-control">
			    </div><!-- /input-group -->
			  </div><!-- /.col-lg-6 -->
			</div><!-- /.row -->
	  </div>
	</div>
	
	
	<div class="panel panel-primary">
	  <div class="panel-heading">
	    <h3 class="panel-title">Button addons</h3>
	  </div>
	  <div class="panel-body">
			<div class="row">
			  <div class="col-lg-6">
			    <div class="input-group">
			      <span class="input-group-btn">
			        <button class="btn btn-default" type="button">Go!</button>
			      </span>
			      <input type="text" class="form-control">
			    </div>
			  </div>
			  <div class="col-lg-6">
			    <div class="input-group">
			      <input type="text" class="form-control">
			      <span class="input-group-btn">
			        <button class="btn btn-default" type="button">Go!</button>
			      </span>
			    </div>
			  </div>
			</div>
	  </div>
	</div>
	
	
	<div class="panel panel-primary">
	  <div class="panel-heading">
	    <h3 class="panel-title">Button with dropdonwss</h3>
	  </div>
	  <div class="panel-body">
			<div class="row">
			  <div class="col-lg-6">
			    <div class="input-group">
			      <div class="input-group-btn">
			        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
			        <ul class="dropdown-menu">
			          <li><a href="#">Action</a></li>
			          <li><a href="#">Another action</a></li>
			          <li><a href="#">Something else here</a></li>
			          <li class="divider"></li>
			          <li><a href="#">Separated link</a></li>
			        </ul>
			      </div><!-- /btn-group -->
			      <input type="text" class="form-control">
			    </div><!-- /input-group -->
			  </div><!-- /.col-lg-6 -->
			  <div class="col-lg-6">
			    <div class="input-group">
			      <input type="text" class="form-control">
			      <div class="input-group-btn">
			        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
			        <ul class="dropdown-menu pull-right">
			          <li><a href="#">Action</a></li>
			          <li><a href="#">Another action</a></li>
			          <li><a href="#">Something else here</a></li>
			          <li class="divider"></li>
			          <li><a href="#">Separated link</a></li>
			        </ul>
			      </div><!-- /btn-group -->
			    </div><!-- /input-group -->
			  </div><!-- /.col-lg-6 -->
			</div><!-- /.row -->
	  </div>
	</div>
</div>
<%@ include file="/WEB-INF/view/common/footer.jsp"%>
</body>
</html>
